<template>
	<view class="page">
		<view class="head">
			<view class="head-flex">
				<view class="logo">
					<image src="../../static/logo.png" mode="aspectFill"></image>
				</view>
				<!-- <view class="name1">未登录</view> -->
				<view v-if="isLoginFlag">
					<view class="name">{{ user.nickName }}</view>
					<view class="name1">{{ user.phoneNumber }}</view>
				</view>
			</view>
			<button class="go-logo" shape="circle" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="!isLoginFlag">
				<view class="name2">去登录</view>
				<image class="logo-img" src="../../assets/my/2.png" mode=""></image>
			</button>
			<button class="go-logo" shape="circle" @click="logOut"  v-else >
				<view class="name2">退出登录</view>
			</button> 
		</view>

		<view class="content">
			<view class="content-flex" @click="orderUrl()">
				<view class="content-flex1">
					<image class="content-img" src="../../assets/my/8.png" mode=""></image>
					<view class="content-name">预约订单</view>
				</view>
				<image class="content-img1" src="../../assets/my/1.png" mode=""></image>
			</view>

			<view class="content-flex" @click="goUrl()">
				<view class="content-flex1">
					<image class="content-img" src="../../assets/my/3.png" mode=""></image>
					<view class="content-name">账单查询</view>
				</view>
				<image class="content-img1" src="../../assets/my/1.png" mode=""></image>
			</view>

			<view class="content-flex"  @click="goUrl()">
				<view class="content-flex1">
					<image class="content-img" src="../../assets/my/4.png" mode=""></image>
					<view class="content-name">优惠券</view>
				</view>
				<image class="content-img1" src="../../assets/my/1.png" mode=""></image>
			</view>

			<!-- <view class="content-flex">
				<view class="content-flex1">
					<image class="content-img" src="../../assets/my/5.png" mode=""></image>
					<view class="content-name">客服</view>
				</view>
				<image class="content-img1" src="../../assets/my/1.png" mode=""></image>
			</view>

			<view class="content-flex">
				<view class="content-flex1">
					<image class="content-img" src="../../assets/my/6.png" mode=""></image>
					<view class="content-name">设置</view>
				</view>
				<image class="content-img1" src="../../assets/my/1.png" mode=""></image>
			</view> -->
			<view class="content-flex" @click="goUrl()">
				<view class="content-flex1">
					<image class="content-img" src="../../assets/my/7.png" mode=""></image>
					<view class="content-name">通知公告</view>
				</view>
				<image class="content-img1" src="../../assets/my/1.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
import { login } from '@/api/main/main';
export default {
	data() {
		return {
			user: {},
			isLoginFlag : false
		};
	},
	onShow() {
		this.isLoginFlag = this.isLogin();
		if(uni.getStorageSync("userinfo")){
			 this.user = uni.getStorageSync("userinfo");
		}
	},
	methods: {
		logOut(){
			
			uni.showModal({
				title: '提示',
				content: '您确定要退出登录吗？',
				success: res => {
					if (res.confirm) {
						this.isLoginFlag = false;
						uni.setStorageSync('expireTime', null);
						uni.setStorageSync('token', null);
						uni.setStorageSync('userinfo',null);
						uni.showToast({
							title: '退出成功',
							icon: 'none'
						});
					}
				}
			});
		},
		goUrl(){ 
			uni.showToast({
				icon: 'none',
				title: '敬请期待'
			});
		},
		async getPhoneNumber(e) {
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				this.handleLogin(e.detail.code);
			} else {
				uni.showToast({
					icon: 'none',
					title: '授权失败'
				});
			}
		},
		isLogin(){
			//退出登录，清空token
			const userInfo = uni.getStorageSync('userinfo');
			const isLogin =  !(userInfo ==null || userInfo == '' || userInfo == {});
			console.log("isLogin --> ",isLogin);
			return isLogin;
		},
		handleLogin(code) {
			login({ code: code }).then((res) => {
				if (res.code == 200) {
					uni.setStorageSync('expireTime', res.data.expireTime);
					uni.setStorageSync('token', res.data.token);
					uni.setStorageSync('userinfo',res.data.user)
					this.user = res.data.user;
					this.isLoginFlag = true;
					uni.showToast({
						title: '登录成功'
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '登录失败'+res.msg
					});
				}
			});
		},
		orderUrl() {
			uni.setStorageSync('status', 1);
			uni.switchTab({
				url: '/pages/order/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	padding: 33rpx;
	background-color: #f5f5f5;
	height: 100vh;
}

.head {
	width: 686rpx;
	height: 213rpx;
	border-radius: 18rpx;
	background: rgba(100, 194, 149, 1);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40rpx;
}

.head-flex {
	display: flex;
	align-items: center;
}

.logo {
	width: 118rpx;
	height: 118rpx;
	// border: 1rpx solid #fff;
	border-radius: 50%;
	margin-right: 40rpx;

	image {
		width: 118rpx;
		height: 118rpx;
		border-radius: 50%;
	}
}

.name {
	font-size: 40rpx;
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
}

.name1 {
	font-size: 32rpx;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
}

.go-logo {
	display: flex;
	align-items: center;
	background: transparent;

	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	background: transparent;
	font-family: inherit;
	color: inherit;
	line-height: unset;
	&::after {
		display: none; /* 去除小程序按钮的默认边框 */
	}
}

.name2 {
	font-size: 32rpx;
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
}

.logo-img {
	width: 15rpx;
	height: 26rpx;
	margin-left: 10rpx;
}

.content {
	width: 686rpx;
	/* height: 100%; */
	border-radius: 18rpx;
	background: rgba(255, 255, 255, 1);
	margin-top: 26rpx;
}

.content-flex {
	display: flex;
	align-content: center;
	justify-content: space-between;
	padding: 45rpx 33rpx;
}

.content-flex1 {
	display: flex;
}

.content-img {
	width: 52rpx;
	height: 52rpx;
}

.content-img1 {
	width: 15rpx;
	height: 26rpx;
	margin-top: 10rpx;
}

.content-name {
	font-size: 32rpx;
	font-weight: 400;
	color: rgba(51, 51, 51, 1);
	margin-left: 16rpx;
	display: flex;
	align-content: center;
	margin-top: 4rpx;
}
</style>
